<template>
	<a-breadcrumb class="titile">
		<a-breadcrumb-item>有道——图片翻译——上传图片</a-breadcrumb-item>
	</a-breadcrumb>
	<a-layout-content style="margin: 0 16px">
		<div class="content">
			<a-row>
				<a-col class="uploadImg" :span="24">
					<a-upload-dragger v-model:fileList="fileList" name="file" accept="image/png,image/jpeg"
						:customRequest="uploadHandle" @change="handleChange" :beforeUpload="beforeUpload" :maxCount="1">
						<p class="ant-upload-drag-icon">
							<inbox-outlined></inbox-outlined>
						</p>
						<p class="ant-upload-text">单击或拖动文件到此区域以上传</p>
						<p class="ant-upload-hint">
							单个文件上传,仅支持jpg,png格式
						</p>
					</a-upload-dragger>
					<div class="option">
						源语言
						&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						<a-select ref="select" v-model:value="value1" :options="languageOptions" style="width: 120px"
							@select="selectfocus1">
						</a-select>
						&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						翻译后语言
						<a-select ref="select" v-model:value="value2" :options="languageOptions" style="width: 120px"
							@select="selectfocus2">
						</a-select>
					</div>
					<a-divider type="horizontal" class="divider" />
					<a-col :span="24">
						<div class="resultDiv">
							返回结果
						</div>
						<a-textarea v-model:value="ocrValue" style="width: 100vw;
		height: 35vh;overflow: scroll;overflow-x: hidden;resize: none;" placeholder="翻译后文本" />
					</a-col>
				</a-col>
			</a-row>
		</div>
	</a-layout-content>
</template>
<script lang="ts">
	import {
		InboxOutlined
	} from '@ant-design/icons-vue';
	import {
		message
	} from 'ant-design-vue';
	import {
		defineComponent,
		ref
	} from 'vue';
	import type {
		UploadChangeParam
	} from 'ant-design-vue';
	import {
		ImgOcrTranslateToText
	} from '../../../api/youdaoapi.js'
	import languageList from '../../../../youdaoLanguageList.js'
	export default defineComponent({
		name: 'ocr',
		components: {
			InboxOutlined,
		},
		setup() {
			const uploadHandle = (e) => {
				if (value1.value === '' || value1.value === 'underfined') {
					value1.value = 'auto';
				}
				if (value2.value === '' || value2.value === 'underfined') {
					value2.value = 'zh';
				}
				const formData = new FormData()
				fileList.value.forEach((file) => {
					file.status = "uploading";
					formData.append("file", file.originFileObj);
					formData.append("platform", "youdao");
					formData.append("from", value1.value);
					formData.append("to", value2.value);
				})
				ImgOcrTranslateToText(formData).then(res => {
					if (res.code === 200) {
						ocrValue.value = res.data.translation;
					}
				})
			};
			const handleChange = (info: UploadChangeParam) => {
				const status = info.file.status;
				if (status !== 'uploading') {
					console.log(info.file, info.fileList);
				}
				if (status === 'done') {
					message.success(`${info.file.name}上传成功`);
				} else if (status === 'error') {
					message.error(`${info.file.name}上传失败`);
				}
			};
			const beforeUpload: UploadProps['beforeUpload'] = file => {
				const type = file.type
				if (type === 'image/png' || type === 'image/jpeg') {
					return true;
				}
				return false;
			};
			const selectfocus1 = (data) => {
				console.log('选择1' + JSON.stringify(data));
				value1.value = data;
			};
			const selectfocus2 = (data) => {
				console.log('选择2' + JSON.stringify(data));
				value2.value = data;
			};
			const fileList = ref < [] > ([]);
			const ocrValue = ref < string > ('');
			const value1 = ref < string > ('auto');
			const value2 = ref < string > ('zh-CHS');
			const languageOptions = ref < SelectProps['options'] > (languageList.list);
			return {
				selectfocus1,
				selectfocus2,
				languageOptions,
				ocrValue,
				beforeUpload,
				handleChange,
				fileList,
				value1,
				value2,
				uploadHandle
			};
		},
	});
</script>
<style>
	.option {
		margin: 0 auto;
		margin-top: 1%;
	}

	/* 	.titile {
		width: 80vw;
		height: 6vh;
		line-height: 6vh;
		padding-left: 1.5%;
		text-align: left;
	}

	.content {
		width: 85vw;
		height: 78vh;
		background-color: white;
		overflow: hidden;
	}

	.divider {
		width: 100vw;
		background-color: #f2eaf2;
		overflow: hidden;
	}

	.uploadImg {
		margin: 0 auto;
		height: 25vh;
	}

	.resultDiv {
		width: 100vw;
		height: 5vh;
		line-height: 5vh;
		text-align: left;
		padding-left: 0.1%;
	} */
</style>
